<template>
  <div>
    <van-loading v-if="!movieData" size="24px">加载中...</van-loading>
    <Movieitem
      v-else
      v-for="movie in couData"
      :key="movie.filmId"
      :item="movie"
    ></Movieitem>
    <h3 v-if="loading" @click="more">加载更多......</h3>
    <h3 v-if="nomore">没有更多了</h3>
  </div>
</template>

<script setup>
import { getPlayings1, getPlayings2 } from "../../api/movieApi";
import { reactive, onMounted, toRefs, ref, computed } from "vue";
import Movieitem from "../nowplaying/NowplayList.vue";
const state = reactive({
  movieData: null,
  loading: false,
  nomore: false,
});

const { movieData, loading, nomore } = toRefs(state);

const cou = ref(10);

//获取加载数据
const more = () => {
  if (cou.value < state.movieData.length) {
    cou.value += 10;
  } else {
    state.loading = false;
    state.nomore = true;
  }
};

const couData = computed(() =>
  state.movieData.length > 10
    ? state.movieData.slice(0, cou.value)
    : state.movieData
);

const getData = async () => {
  const { data: res } = await getPlayings1(1);
  console.log(res);
  state.movieData = res.films;
  state.loading = true;
  const { data: res2 } = await getPlayings2(1);
  console.log(res2);
  res2.films.forEach((item) => {
    state.movieData.push(item);
  });
};

onMounted(() => {
  //每1s刷新数据
  setTimeout(() => {
    getData();
  }, 1000);
});
</script>

<style lang="scss" scoped>
.van-loading {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.05);
  height: 40px;
  line-height: 40px;
}
h3 {
  text-align: center;
}
</style>
